<template>
  <div style="padding:20px;" class="warp">
    <div id="container" style="width:500px; height:500px;"></div>
  </div>
</template>
<script>
export default {
  props: ["hotel_list", "index_map", "obj_location_to_map"],
  data() {
    return {
      map: "",
      locations: [],
    };
  },
  watch: {
    hotel_list() {
      this.setLocations(this.hotel_list);
      // this.map.setCenter([
      //   this.getCenter(hotel_list)[0],
      //   this.getCenter(this.hotel_list)[1],
      // ]);
      // console.log(
      //   this.getCenter(this.hotel_list)[0],
      //   this.getCenter(this.hotel_list)[1]
      // );
    },
    obj_location_to_map() {
      this.map.setCenter([
        this.hotel_list[this.index_map].location.longitude,
        this.hotel_list[this.index_map].location.latitude,
      ]);
      //locations的子集就是点标记实例
      // console.log(this.locations[this.index_map]);
      setTimeout(() => {
        this.locations[this.index_map].setAnimation("AMAP_ANIMATION_DROP");
      }, 300);

      var infoWindow = new AMap.InfoWindow({
        position: [
          this.hotel_list[this.index_map].location.longitude,
          this.hotel_list[this.index_map].location.latitude,
        ],
        anchor: "bottom-right",
        content: this.hotel_list[this.index_map].name,
        offset: new AMap.Pixel(0, -28),
      });
      infoWindow.open(this.map);
    },
  },
  computed: {},

  methods: {
    // getCenter(arr) {
    //   let toalLng = 0;
    //   let toalLat = 0;
    //   console.log(arr[0].location.longitude, "第一个点的坐标");
    //   arr.forEach((item) => {
    //     toalLng += Number(item.location.longitude);
    //     toalLat += Number(item.location.latitude);
    //   });
    //   console.log(toalLng, toalLat);
    //   return [toalLng / 5, toalLat / 5];
    // },

    get_hotel_info() {
      return new Promise((reslove, reject) => {
        reslove(this.hotel_list);
      });
    },
    setLocations(res) {
      this.locations.forEach((item) => {
        this.map.remove(item);
      });
      this.locations = [];
      res.forEach((item) => {
        var marker = new AMap.Marker({
          position: [item.location.longitude, item.location.latitude],
          title: item.name,
        });
        this.locations.push(marker);
      });
      this.map.add(this.locations);
      // 地图自适应点坐标
      this.map.setFitView();
    },
  },
  mounted() {
    window.onLoad = () => {
      this.map = new AMap.Map("container", {
        zoom: 11,
      });
      // window.onLoad = () => {  这里要改成箭头函数下面this才能指向全局
      this.get_hotel_info().then((res) => {
        this.setLocations(res);
      });
    };
    var key = "49b5546a1aec9109e67018ca29cf25a4";
    var url = `https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=onLoad`;
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>
<style lang="less" scoped>
#container {
  width: 900px;
  height: 195px;
}
.warp {
  margin-left: -57px;
}
</style>

